<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">

    <f:view contentType="text/html">
        <h:head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
            <title>Login Page</title>
        </h:head>

        <h:body>

            <p:layout fullPage="true">
                <p:layoutUnit position="north" header="EducationX">
                    <p:toolbar style="height:25px">
                        <p:toolbarGroup align="left">
                            <h:link value="Courses" outcome="courses" />     
                        </p:toolbarGroup>
                    </p:toolbar>
                </p:layoutUnit>

                <p:layoutUnit position="center">
                    <h:messages errorStyle="color: red" infoStyle="color: green" layout="table"/>
                    <h1>Login Page for EducationX</h1>
                    <h:form>
                        <h:panelGrid columns="2" border="0">
                            Email: <h:inputText id="email"  value="#{user.user.email}" validatorMessage="user email is not valid">
                                <f:validateRegex pattern="[\w\.-]*[a-zA-Z0-9_]@[\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]" />                           
                            </h:inputText>
                            Password: <h:inputSecret id="password" value="#{user.user.password}" validatorMessage="Password must meet the requirement">
                                <f:validateRegex  pattern="((?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,20})" />
                            </h:inputSecret>
                        </h:panelGrid>                                
                        <h:commandButton action="#{user.validateUser}" value="Login"/>
                        <br />           
                        <br />
                        <h:link value="Create a new User" outcome="newUser" />
                    </h:form>
                </p:layoutUnit>

            </p:layout>
        </h:body>
    </f:view>
</html>
